<template>
    <div class="app-container">

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>客户信息</span>
                <span></span>
            </div>

            <el-descriptions title="">
<!--                <el-descriptions-item label="所属区域">-->
<!--                    {{ form.region|filterNull }}-->
<!--                </el-descriptions-item>-->
                <el-descriptions-item label="客户名称">
                    {{ form.customerName|filterNull }}
                </el-descriptions-item>
<!--                <el-descriptions-item label="车辆归属">-->
<!--                    {{ form.cityName|filterNull }}-->
<!--                </el-descriptions-item>-->
                <el-descriptions-item label="在租台数">
                    {{ form.rentedUnitNum|filterNull }}
                </el-descriptions-item>
                <el-descriptions-item label="是否有违章">
                    <dict-tag
                        :options="dict.type.violation_flag"
                        :value="form.violationFlag"/>
                </el-descriptions-item>
                <el-descriptions-item label="违章台数">{{ form.violationNum|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="未处理违章数">{{
                        form.unHandleViolationCount|filterNull
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="违章总分数">{{
                        form.violationTotalScore|filterNull
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="违章保证金">{{ form.violationMargin|filterNull }}</el-descriptions-item>
                <el-descriptions-item label="产品类型">
                    <dict-tag
                        :options="dict.type.quota_rent_type"
                        :value="form.contractType"/>
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div class="card-wrap flex-column justify-end card-padding">

            <div class="card-title-wrap">
                <span>违章记录</span>
                <span></span>
            </div>

            <el-table
                border
                :data="form.carViolationRecordVoList"
                style="width: 100%;margin: 10px 0">
                <el-table-column
                    prop="carNo" align="center" min-width="130" show-overflow-tooltip
                    label="车牌号">
                    <template v-slot="{row}">
                        {{ row.carNo|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column min-width="130"
                    prop="sourceType" align="center" show-overflow-tooltip
                    label="车辆来源">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.car_source"
                            :value="scope.row.sourceType"
                        />
                    </template>
                </el-table-column>

                <el-table-column min-width="130" show-overflow-tooltip label="车辆产权公司" align="center" prop="customerProperty">
                    <template v-slot="{row}">
                        {{ row.propertyRightName|filterNull }}
                    </template>
                </el-table-column>

                <el-table-column min-width="130" show-overflow-tooltip label="车辆归属公司" align="center" prop="customerProperty">
                    <template v-slot="{row}">
                        {{ row.ascription|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column min-width="130" show-overflow-tooltip label="车辆运营城市" align="center" prop="customerProperty">
                    <template v-slot="{row}">
                        {{ row.operationsName|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column min-width="130" show-overflow-tooltip label="车辆大区城市" align="center" prop="region">
                    <template v-slot="{row}">
                        {{ row.region|filterNull }}
                    </template>
                </el-table-column>

                <el-table-column show-overflow-tooltip
                    prop="carNature" align="center" min-width="130"
                    label="车辆性质">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.car_nature"
                            :value="scope.row.carNature"
                        />
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip
                    prop="penaltyScore" align="center" min-width="130"
                    label="罚款分数">
                    <template v-slot="{row}">
                        {{ row.penaltyScore|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip
                    prop="fineSum" align="center" min-width="130"
                    label="罚款金额">
                    <template v-slot="{row}">
                        {{ row.fineSum|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip
                    prop="violationTime" align="center" min-width="150"
                    label="违章时间">
                    <template v-slot="{row}">
                        {{ row.violationTime|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip
                    prop="violationAddress" align="center" min-width="260"
                    label="违章地点">
                    <template v-slot="{row}">
                        {{ row.violationAddress|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip min-width="260"
                    prop="violationEvent" align="center"
                    label="违章行为">
                    <template v-slot="{row}">
                        {{ row.violationEvent|filterNull }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip min-width="130"
                    prop="handleStatus" align="center"
                    label="处理状态">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.illegal_process_status"
                            :value="scope.row.handleStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip min-width="130"
                    prop="paymentStatus" align="center"
                    label="是否交款">
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.illegal_payment_status"
                            :value="scope.row.paymentStatus"
                        />
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <div class="card-wrap flex justify-end card-padding">
            <el-button @click="cancel">返回</el-button>
<!--            <el-button :loading="buttonLoading" type="primary" @click="submitForm">保存</el-button>-->
        </div>

    </div>
</template>

<script>


import {carViolationSummarydetail} from "@/api/illegalManage/illegalList";

export default {
    name:"IllegalSummaryDetail",
    components: {},
    dicts: ['violation_flag', 'quota_rent_type', 'illegal_process_status', 'illegal_payment_status', 'car_source', 'car_nature'],
    data() {
        return {
            buttonLoading: false,
            form: {},
        };
    },
    watch:{
        // '$route':{
        //     handler(val){
        //
        //         if(val && val.name==this.$options.name){
        //             if (this.$route.query && this.$route.query.orderId && !this.$route.query.tabClick) {
        //                 this.getOldData(this.$route.query.orderId);
        //             }
        //             else if(!this.$route.query.tabClick){
        //                 this.form = {}
        //             }
        //         }
        //     },
        //     immediate:true,
        //     deep:true
        // }
    },
    created() {


      if (this.$route.query && this.$route.query.orderId) {
          this.getOldData(this.$route.query.orderId);
      }else {
          this.querys = this.decodeParams(this.$route.query?.query);
          if(this.querys && this.querys.orderId){
            this.getOldData(this.querys.orderId);
          }
      }

        // this.getOldData(this.$route.query.orderId)
    },
    methods: {
        cancel(){
            this.$router.back();
            this.$store.dispatch('tagsView/delView', this.$route);
        },
        // submitForm(){
        //     let that = this
        //     this.$refs["followForm"].validate(valid => {
        //         if (valid) {
        //             this.buttonLoading = true;
        //
        //             cluesFollowRecordAdd({
        //                 cluesId:that.$route.query.cluesId,
        //                 ...that.followForm
        //             }).then(res=>{
        //                 this.buttonLoading = false;
        //                 this.$modal.msgSuccess( "提交成功");
        //                 this.$router.back()
        //             }).finally(e=>{
        //                 this.buttonLoading = false;
        //             })
        //         }
        //     });
        // },
        getOldData(orderId) {
            carViolationSummarydetail({
                orderId:orderId
            }).then(res => {
                this.form = res.data
            })
        },

    }
};
</script>


<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 10px;
    width: 70%;
}


</style>
